<template>
  <div>
    <el-card class="title" style="height: 20px">
      <h1 style="height: 10px">OverView</h1>
    </el-card>
    <div class="block">
      <el-date-picker
        v-model="timeInterval"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :picker-options="pickerOptions"
      />
    </div>
    <el-card>
      <el-row :gutter="10">
        <el-col :span="10">
          <FlowChart :datelist="dateList"/>
          <TimeLineChart :datelist="dateList"/>
        </el-col>
        <el-col :span="8">
          <ProtocolChart/>
          <WarningTypeChart :datelist="dateList"/>
        </el-col>
        <el-col :span="6">
          <h3 style="text-align: center">上下行速度</h3>
          <SpeedChartOne/>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import FlowChart from '../Overviewchart/FlowChart'
import SpeedChartOne from '../Overviewchart/SpeedChartOne'
import TimeLineChart from '../Overviewchart/TimeLineChart'
import ProtocolChart from '../Overviewchart/ProtocolChart'
import WarningTypeChart from '../Overviewchart/WarningTypeChart'
export default {
  name: 'Overview',
  data() {
    return {
      pickerOptions: {
        // disabledDate是一个函数,参数是当前选中的日期值,这个函数需要返回一个Boolean值,
        disabledDate: time => {
          let _now = Date.now()
          let seven = 30 * 24 * 60 * 60 * 1000
          let preSevenDays = _now - seven
          return time.getTime() > _now || time.getTime() < preSevenDays
        },
        onPick: (maxDate, minDate) => {
          maxDate = minDate + 7 * 24 * 60 * 60 * 1000
        }
      }, // 日期设置对象
      timeInterval: '',
      dateList: ['12-01', '12-02', '12-03', '12-04', '12-05', '12-06', '12-07']
    }
  },
  created() {
    // this.getDefaultData()
  },
  watch: {
    timeInterval(date) {
      this.dateList = []
      let startDay = date[0]
      let endDay = date[1]
      let dateInterval = (endDay - startDay) / 1000 / 60 / 60 / 24 + 1
      let oneDay = 24 * 60 * 60 * 1000
      for (let i = 0; i < dateInterval; i++) {
        let nextDay = startDay.getTime() + oneDay * i
        nextDay = new Date(nextDay)
        this.dateList.push(
          `${nextDay.getFullYear()}-${nextDay.getMonth() +
            1}-${nextDay.getDate()}`
        )
      }
      // console.log(this.dateList)
      // // console.log(dateInterval)
      // console.log(startDay)
      // console.log(endDay)

      // 向后台发送数据这个时间段的数据请求
      // let params = new URLSearchParams()
      // params.append('sideBar', this.loginForm.sideBar)
      // params.append('psd', this.loginForm.psd)

      // let res = await this.$http.post('/zz/login', params)

      // if (res.data.status !== 200) return this.$message.error('请求数据失败')
    }
  },
  methods: {
    // async getDefaultData() {
    //   let params = new URLSearchParams()
    //   params.append('startDate', '2019-12-5')
    //   params.append('endDate', '2019-12-11')
    //   let getCapPackClassifyForDateRes = await this.$http.post(
    //     '/zz/getCapPackClassifyForDateNew',
    //     params
    //   )
    //   if (getCapPackClassifyForDateRes.data.status !== 200) {
    //     return this.$message.error('请求数据失败')
    //   } else {
    //     // console.log(getCapPackClassifyForDateRes)
    //     this.flowChartData.totalFlow =
    //       getCapPackClassifyForDateRes.data.totalFlow
    //     this.flowChartData.accessStatisticalList =
    //       getCapPackClassifyForDateRes.data.accessStatisticalList
    //     console.log(this.flowChartData)
    //     console.log('请求数据成功')
    //   }
    // }
  },
  components: {
    FlowChart,
    SpeedChartOne,
    ProtocolChart,
    WarningTypeChart,
    TimeLineChart
  }
}
</script>

<style scoped>
</style>
